﻿<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>01 MMDTest</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="../../assets/js/three.js"></script>
    <script src="../../assets/js/mmdparser.min.js"></script>
    <script src="../../assets/js/ammo.js"></script>

    <script src="../../assets/js/loaders/TGALoader.js"></script>
    <script src="../../assets/js/loaders/MMDLoader.js"></script>
    <script src="../../assets/js/effects/OutlineEffect.js"></script>
    <script src="../../assets/js/animation/CCDIKSolver.js"></script>
    <script src="../../assets/js/animation/MMDPhysics.js"></script>
    <script src="../../assets/js"></script>
</head>

<body>
    <script>
        var container;
        var mesh, camera, scene, renderer, effect;
        var helper;
        var ready = false;
        var clock = new THREE.Clock();
        init();
        animate();
        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
            // scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xffffff);
            scene.add(new THREE.PolarGridHelper(30, 10));
            var ambient = new THREE.AmbientLight(0x666666);
            scene.add(ambient);
            var directionalLight = new THREE.DirectionalLight(0x887766);
            directionalLight.position.set(- 1, 1, 1).normalize();
            scene.add(directionalLight);
            //
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild(renderer.domElement);
            effect = new THREE.OutlineEffect(renderer);
            // model
            function onProgress(xhr) {
                if (xhr.lengthComputable) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log(Math.round(percentComplete, 2) + '% downloaded');
                }
            }
            var modelFile = 'models/mmd/miku/miku_v2.pmd';
            var vmdFiles = ['models/mmd/vmds/wavefile_v2.vmd'];
            var cameraFiles = ['models/mmd/vmds/wavefile_camera.vmd'];
            var audioFile = 'models/mmd/audios/wavefile_short.mp3';
            var audioParams = { delayTime: 160 * 1 / 30 };
            helper = new THREE.MMDAnimationHelper();
            var loader = new THREE.MMDLoader();
            loader.loadWithAnimation(modelFile, vmdFiles, function (mmd) {
                mesh = mmd.mesh;
                helper.add(mesh, {
                    animation: mmd.animation,
                    physics: true
                });
                loader.loadAnimation(cameraFiles, camera, function (cameraAnimation) {
                    helper.add(camera, {
                        animation: cameraAnimation
                    });
                    new THREE.AudioLoader().load(audioFile, function (buffer) {
                        var listener = new THREE.AudioListener();
                        var audio = new THREE.Audio(listener).setBuffer(buffer);
                        listener.position.z = 1;
                        helper.add(audio, audioParams);
                        scene.add(audio);
                        scene.add(listener);
                        scene.add(mesh);
                        ready = true;
                    }, onProgress, null);
                }, onProgress, null);
            }, onProgress, null);
            //
            window.addEventListener('resize', onWindowResize, false);
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            effect.setSize(window.innerWidth, window.innerHeight);
        }
        //
        function animate() {
            requestAnimationFrame(animate);
            render();
        }
        function render() {
            if (ready) {
                helper.update(clock.getDelta());
            }
            effect.render(scene, camera);
        }
    </script>
</body>

</html>